<template>
  <el-dialog
    :title="title"
    class="addorder"
    :visible.sync="isDial"
    width="800px"
    :before-close="closeDialog"
  >
    <el-form :model="form" size="mini" :rules="rules" ref="addorder">
      <div class="row">
        <el-form-item label="小区名称" prop="housesName" :label-width="formLabelWidth">
            <el-autocomplete size="mini" style="width:180px;" :maxlength='10' class="leftBorder inline-input" v-model="form.housesName" :fetch-suggestions="querySearch" placeholder="小区名称" :trigger-on-focus="false" @select="handleSelect" ></el-autocomplete>
            <el-cascader size="mini" style="margin-left: 10px;"
              expand-trigger="hover"
              :options="pedestal"
              v-model="form.pedestal" @change="selectRoom">
            </el-cascader>
        </el-form-item>
        <div class="column">
            <el-form-item label="户型" prop="housesType" :label-width="formLabelWidth">
                <el-select v-model="form.housesType[0]" class="leftBorder" style="width:70px" placeholder="室" size="mini">
                    <el-option :label="item" v-for="item in 9" :value="item"></el-option>
                </el-select> 室
                <el-select v-model="form.housesType[1]" class="leftBorder" style="width:70px" placeholder="厅" size="mini">
                    <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
                </el-select> 厅
                <el-select v-model="form.housesType[2]" class="leftBorder" style="width:70px" placeholder="卫" size="mini">
                    <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
                </el-select> 卫
                <el-select v-model="form.housesType[3]" class="leftBorder" style="width:70px" placeholder="阳" size="mini">
                    <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
                </el-select> 阳
            </el-form-item>
            <el-form-item label="建筑面积" prop="bulidArea" :label-width="formLabelWidth">
               <el-input v-model="form.bulidArea" :maxlength="10" class="leftBorder" placeholder="平米" autocomplete="off" size="mini" ></el-input>
            </el-form-item>
        </div>
        <div class="column">
            <el-form-item label="房屋类型" prop="housesClass" :label-width="formLabelWidth">
                <el-select v-model="form.housesClass" class="leftBorder" placeholder=" " size="mini">
                   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="交付状况" prop="deliveryStatus" :label-width="formLabelWidth">
                <el-select v-model="form.deliveryStatus" class="leftBorder" placeholder=" " size="mini">
                    <el-option label="精装" value="1"></el-option>
                    <el-option label="毛坯" value="0"></el-option>
                </el-select>
             </el-form-item>
        </div>
      </div>
      <div class="row">
        <div class="column">
            <el-form-item label="业主姓名" prop="customer" :label-width="formLabelWidth">
               <el-input v-model="form.customer" :maxlength="10" class="leftBorder" autocomplete="off" size="mini" ></el-input>
            </el-form-item>
            <el-form-item label="订单来源" prop="source" :label-width="formLabelWidth">
                <el-select v-model="form.source" placeholder=" " size="mini">
                    <el-option label="淘宝" :value="1"></el-option>
                    <el-option label="微盟" :value="0"></el-option>
                    <el-option label="其他" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="交易时间" prop="orderTime" :label-width="formLabelWidth">
                <!-- 暂时还不能选时间 <el-date-picker v-model="form.orderTime" style="width:180px;" class="leftBorder"  type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->
                <el-date-picker v-model="form.orderTime" style="width:180px;" class="leftBorder"  type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
        </div>
        <div class="column">
            <el-form-item label="业主手机" prop="phone" :label-width="formLabelWidth">
                <el-input v-model="form.phone" :maxlength="11" class="leftBorder" autocomplete="off" size="mini" ></el-input>
             </el-form-item>
             <el-form-item label="订单号" prop="orderNo" :label-width="formLabelWidth">
                <el-input v-model="form.orderNo" :maxlength="30" class="leftBorder" autocomplete="off" size="mini" ></el-input>
             </el-form-item>
             <el-form-item label="订单金额" prop="payAmount" :label-width="formLabelWidth">
                <el-input v-model="form.payAmount" :maxlength="10" class="leftBorder" autocomplete="off" size="mini" ></el-input>
             </el-form-item>
        </div>
      </div>
      <div class="row">
        <el-form-item label="收房时间" prop="getHomeDate" :label-width="formLabelWidth">
            <el-date-picker v-model="form.getHomeDate" style="width:180px;" type="date" :picker-options="pickerOptions0" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            <el-select v-model="form.getHomeTime" style="width:80px;margin-left: 10px;" size="mini" clearable>
                <el-option label="上午" value="1"></el-option>
                <el-option label="下午" value="2"></el-option>
                <el-option label="全天" value="0"></el-option>
            </el-select><span style="margin-left: 10px;color:#97A8BE">如果业主不能确定收房日期则为空</span>
        </el-form-item>
        <el-form-item label="信息备注" prop="remark" :label-width="formLabelWidth">
            <el-input v-model="form.remark" style="width:100%" clearable :maxlength="200" autocomplete="off" size="mini"></el-input>
            <span style="margin-right:10px;cursor: pointer;" @click="setRemark">手机号错误</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">电话无人接</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">电话打不通</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">收房日期不能确定</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">顶楼有赠送</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">有地下室</span>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="saveOrder">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
// let info = {
//     remark:'备注备注', //备注
//     housesType :['1','1','1','1'], //户型
//     customer:'张三', //业主姓名
//     phone:'15268095284', //业主手机号
//     orderNo:'0211', //订单号
//     payAmount:'199', //订单价格
//     orderTime:'2019-01-28', //交易时间
//     bulidArea:'120', //面积
//     deliveryStatus:'1', //交付状况
//     housesName:'', //小区名称
//     housesClass:'1', //房屋类型
//     source:1, //来源
//     getHomeDate:'2019-01-28', //收房时间
//     getHomeTime:'1', //上午下午
//     pedestal:[], //栋座
// };
let info = {
    remark:'', //备注
    housesType :['1','1','1','1'], //户型
    customer:'', //业主姓名
    phone:'', //业主手机号
    orderNo:'', //订单号
    payAmount:'', //订单价格
    orderTime:'', //交易时间
    bulidArea:'', //面积
    deliveryStatus:'1', //交付状况
    housesName:'', //小区名称
    housesClass:'1', //房屋类型
    source:2, //来源
    getHomeDate:'', //收房时间
    getHomeTime:'0', //上午下午
    pedestal:[], //栋座
};
import { request } from "../../assets/request.js";
import { setTime } from "../../assets/session.js";
export default {
  data() {
    return {
        isDial: false,
        form: info,
        rules: {
            customer: [{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "业主姓名是必填项",trigger: "blur"}],
            phone: [{pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/g,required: true,message: "请输入正确的手机号",trigger: "blur"}],
            orderTime:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "交易时间是必选项",trigger: "blur"}],
            orderNo:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "订单号是必填项",trigger: "blur"}],
            deliveryStatus:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "交付状况是必选项",trigger: "blur"}],
            housesClass:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "房屋类型是必选项",trigger: "blur"}],
            bulidArea:[{pattern: /^-?\d+$/,required: true,message: "面积只能是整数",trigger: "blur"}],
            housesName:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "小区名称是必填项",trigger: "blur"}],
            payAmount:[{pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,required: true,message: "订单价格只能是整数或两位小数",trigger: "blur"}]
        },
        formLabelWidth: "80px",
        title: "添加订单",
        id: "",
        options: this.$store.state.options,
        property:[], //全部小区
        pedestal:[], //楼栋 单元房 号集合
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
    };
  },
  created() {
    let that = this;
    this.$root.$on("addOrder", data => {
      this.isDial = true;
      let pedestal=this.form //将缓存中的栋座清空
      pedestal.pedestal=[]
      // 将状态管理器的所有楼盘赋值给property
      this.property=this.$store.state.property
    });
  },
  methods: {
    saveOrder() { //保存
        let that = this;
        this.$refs.addorder.validate(valid => {
            if(!valid){
                return
            }
            let form =that.form
            let housesType=form.housesType //不能改变form 的格式 vue的坑
            if(typeof(housesType)=='object'){
                housesType=housesType.join('-')
            }
            let pedestal=that.pedestal
            // console.log(form.pedestal)
            let params={}
            for(let i in form){
                params[i]=form[i]
            }
            if(form.pedestal[0] && form.pedestal[1] && form.pedestal[2]){   //判断房号是否已经选择
                for(let i in pedestal){  //循环将  数组格式转换成请求需要的字段
                    for(let j in pedestal[i].children){
                        for(let k in pedestal[i].children[j].children){
                            if(pedestal[i].children[j].children[k].value==params.pedestal[2] && pedestal[i].children[j].id==params.pedestal[1] && pedestal[i].value==params.pedestal[0]){
                                params.housesId=pedestal[i].housesId  //楼盘id
                                params.housesNumberId =params.pedestal[2]  //房号id
                                params.housesUnitId =pedestal[i].children[j].id //单元id
                                params.housesUnitName =params.pedestal[0]  //单元名称
                                params.fullName=pedestal[i].value+pedestal[i].children[j].label+pedestal[i].children[j].children[k].label //房号串的拼接
                            }
                        }
                    }
                }
            }else{
              that.$message({
                type: "warning",
                message: "房号是必选项"
              });
              return
            }
            params.getHomeTime=params.getHomeTime=='' || null== params.getHomeTime?'0':params.getHomeTime
            delete params.pedestal;
            params.housesType=housesType
            params.payAmount=parseFloat(params.payAmount)
            params.bulidArea=parseFloat(params.bulidArea)
            params.housesClass=params.housesClass=='平层'?'1':params.housesClass=='LOFT'?'2':params.housesClass=='复式'?'3':params.housesClass=='排屋'?'4':params.housesClass=='别墅'?'5':params.housesClass
            let url='order';
            request.ajaxPost({
                url,
                that,
                type:'POST',
                params,
                fn(res) {
                    that.isDial = false;
                    let form =that.form //清空楼栋选择
                    form.pedestal=[]
                    console.log(res)
                    that.resetForm();
                    that.$root.$emit("searchOrder",{page:1,size:20})
                    that.$root.$emit("page",{page:1,size:20})
                }
            });
        });
    },
    resetForm() {
      //清空记录
      this.$refs["addorder"].resetFields();
    },
    closeDialog() {
      this.isDial = false;
      this.resetForm();
    },
    setRemark(e){ //设置备注
        let form= this.form
        if(form.remark){
            form.remark+='、'+e.target.innerText
        }else{
            form.remark+=e.target.innerText
        }
    },
    querySearch(queryString, cb) {
      var restaurants = this.property;
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    handleSelect(item) { //选中小区名称
      console.log(item);
      let form=this.form
      form.housesName=item.name
      let url = "houses/unit/all";
      let that=this   //解决this指向问题
      let obj={
          housesId:item.id
      }
      form.pedestal=[]
      request.ajaxGet({ //查询小区下面的所有房号
        url,
        that,
        params:obj,
        fn(res){
          console.log(res)
          for(let i in res){
              for(let j in res[i].children){
                //   console.log(res[i].children[j])
                  res[i].children[j].label=res[i].children[j].label+'单元'
              }
          }
          that.pedestal=res
        }
      })
    },
    selectRoom(val){ //选中房号 
        console.log(val)
        let url='houses/number/'+val[2]
        let that=this   //解决this指向问题
        request.ajaxGet({ //查询房号的信息
            url,
            that,   
            fn(res){
                console.log(res)
                let form =that.form
                if(res){
                    form.bulidArea=res.builtArea;
                    form.housesClass=res.type;
                    form.deliveryStatus=''+res.deliveryStatus;
                    form.housesType=res.houseType.split('-');
                }
            }
        })
    }
  },
};
</script>
<style lang="less" scoped>
.addorder {
  text-align: left;
  .row{
      width: 100%;
      border-bottom: 1px solid #eeeeee;
      padding-top: 20px;
      overflow: hidden;
      .column {
                width: 65%;
                float: left;
            .el-select {
                width: 180px;
            }
            .el-input {
                width: 180px;
            }
        }
        .column:last-child{
            width: 35%
        }
  }
  .row:last-child {
    padding-top: 10px;
    border-bottom: 0px;
  }
  
}
</style>
